<template>
	<view>
		<view class="order">订单信息</view>
		<view class="orderCard">
			<view class="orderCard-top">
				<text>订单号：121212112487878</text>
				<text>已完成</text>
			</view>
			<view class="orderCard-foot">
				<text>服务项目：车辆保养</text>
				<text>下单时间：2022-10-10 11:09</text>
				<text>预约时间：2022-10-10 11:09</text>
				<text>车辆：奔驰FWE4/豫A98FHJ</text>
				<text>备注：</text>
			</view>
		</view>
		<view class="order">订单详情</view>
		<view class="orderCard-1">
			<view class="one">
				<text>车辆精洗</text>
				<text>￥199</text>
			</view>
			<view class="two">
				<text>车辆附加费用</text><text>￥199</text>
			</view>
		</view>

		<view class="orderCard-2">
			<view class="three">
				<view class="four-1"><text>原价</text><text>￥100</text></view>
				<view class="four">
					<text>优惠</text><text>-￥10</text>
				</view>
			</view>
			<view class="five">
				<text>支付金额</text>
				<text>￥200</text>
			</view>
		</view>

		<view class="footer">
			<text>评价结果</text>
			<text>评价时间：2022-10-10 11:09</text>
			<view class="footer-1">
				<text>评价结果：</text>
				<uni-rate :readonly="true" :value="3" style="padding-left: 10rpx; " />
			</view>
			<text>评语：评语评语评语评语评语评语</text>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	page {
		background-color: white;
	}

	.order {
		font-size: 36rpx;
		padding: 28rpx 0 0 28rpx;
		border-radius: 24rpx;
	}

	.orderCard {
		width: 680rpx;
		height: 366rpx;
		margin: auto;
		border-radius: 24rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		font-size: 24rpx;
		line-height: 40rpx;
		margin-top: 20rpx;
	}

	.orderCard-top {
		padding-top: 18rpx;
		padding-left: 12rpx;
	}

	.orderCard-top text:nth-child(2) {
		color: red;
		padding-left: 220rpx;
	}

	.orderCard-foot {
		display: flex;
		flex-direction: column;
		padding-left: 12rpx;
	}

	.orderCard-foot text:nth-child(1),
	text:nth-child(2),
	text:nth-child(3),
	text:nth-child(4),
	text:nth-child(5) {
		padding-top: 18rpx;
		font-size: 24rpx;
	}

	.orderCard-1 {
		width: 680rpx;
		height: 184rpx;
		margin: auto;
		border-radius: 24rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		font-size: 24rpx;
		line-height: 40rpx;
		margin-top: 20rpx;
	}

	.one,
	.two {
		font-size: 28rpx;
		padding: 30rpx 0 10rpx 25rpx;
	}

	.one text:nth-child(2) {
		padding-left: 430rpx;
	}

	.two text:nth-child(2) {
		padding-left: 375rpx;
	}


	.orderCard-2 {
		width: 680rpx;
		height: 290rpx;
		margin: auto;
		border-radius: 24rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		font-size: 24rpx;
		line-height: 40rpx;
		margin-top: 20rpx;
	}

	.three text:nth-child(1) {
		height: 250rpx;
		font-size: 28rpx;
		padding: 10rpx 470rpx 0 40rpx;
		margin-top: 30rpx;

	}

	.four-1 {
		margin: auto;
		padding-top: 30rpx;
	}

	.four {
		width: 660rpx;
		margin: auto;
		border-bottom: 2rpx solid #d4d4d4;
		margin-top: 30rpx;
		padding-bottom: 20rpx;
		margin-left: -2rpx;
	}

	.four text:nth-child(2) {
		color: red;
		padding-left: 8rpx;
	}

	.five {
		font-size: 28rpx;
		margin-top: 40rpx;
		padding-left: 40rpx;
	}

	.five text:nth-child(1) {
		padding-right: 410rpx;
	}

	.five text:nth-child(2) {
		font-weight: bold;
	}

	.footer {
		display: flex;
		flex-direction: column;
		padding-left: 28rpx;
		padding-top: 20rpx;
		font-size: 24rpx;
	}

	.footer-1 {
		display: flex;
		padding-top: 18rpx;
	}
</style>